<template>
  <layoutHeader></layoutHeader>
  <div class="mainbox">
  
    <div class="userinfo">
      <span>用户信息</span>
      <div class="block1">
        <div class="pedit">
          <img src="@/assets/icon/user.png">
          <el-button style="background-color: #0864d4;border: 0px;margin-left: 20%;width:60%;" type="primary" @click="edit_visible=true" >修改密码</el-button>
        </div>
        <div class="userinfoin">
          <span>用户名：</span>
          <span>{{ userInfo.userName }}</span>
          <span>手机：</span>
          <span>{{ userInfo.phoneNumber }}</span>
        </div>
      </div>
    </div>

<div class="auth">
<span>个人信息认证</span>
<div class="block1">
  <span>姓名：</span>
  <span>{{ userInfo.userName}}</span>
  <span>手机号：</span>
  <span>{{ userInfo.phoneNumber }}</span>
  <span>证件号：</span>
  <span>{{ userInfo.idCardNumber }}</span>
  <el-button type="primary" style="background-color: #0864d4;width: 30%;height: 15%;border: 0px;margin-left:35%;" @click="auth_visible = true" v-if="!userInfo.idCardNumber">进行个人认证</el-button>

  <el-drawer v-model="auth_visible" :show-close="false" size="55%">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">身份认证</h4>
      <el-button  type="danger" style="background-color: #0864d4;border: 0px;margin-left: 80%;width:5%;font-size: 20px;" @click="close" >
        ×
      </el-button>
    </template>
    <div class="form_auth">
    <el-form ref="form" size="large" autocomplete="off" :model="authData" :rules="rules">
                
                <el-form-item prop="name">
                  <span>姓名</span>
                    <el-input  placeholder="请输入真实姓名" v-model="authData.FullName" ></el-input>
                </el-form-item>
                <el-form-item prop="gender">
                  <span>性别</span>
                  <el-radio-group v-model="radio" >
                    <el-radio :value="3" v-model="authData.gender">男</el-radio>
                    <el-radio :value="6" v-model="authData.gender">女</el-radio>
                  </el-radio-group>              
                </el-form-item>
                <el-form-item prop="dateOfBirth">
                  <div class="block" >
                    <span class="demonstration">出生日期</span>
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      :size="size"
                    />
                  </div>
                </el-form-item>
                <el-form-item prop="idCardNumber">
                  <span>身份证号</span>
                    <el-input  placeholder="请输入身份证号" v-model="authData.IDCardNumber" ></el-input>
                </el-form-item>

                <span>*上传身份证正反面自动补全</span>
                <div class="uploadbox">
                   <el-upload
                   v-model:file-list="fileList"
                   class="upload-demo"
                   :on-change="handleChange"
                   :auto-upload="false"
      
                   >
                   <el-button type="primary">选择</el-button>
                   <template #tip>
                   <el-button type="primary" @click="handleUpload" :disabled="fileList.length === 0">上传</el-button>
                   <div class="el-upload__tip">
                   支持.doc.docx.pdf.png等类型,大小不超过10MB
                   </div>
                   </template>
                   </el-upload>
                   </div>

                   


                <!-- 认证按钮 -->
                <el-form-item>
                    <el-button  class="button" type="primary" auto-insert-space @click="auth" :plain="true" style="width: 50%;margin-left: 25%;">
                        认证
                    </el-button>
                </el-form-item>
                
            </el-form>
          </div>
  </el-drawer>
  <el-drawer v-model="edit_visible"  :with-header="false" direction="ttb" size="48%" >
    <div>
      <el-button  type="danger" style="background-color: #0864d4;border: 0px;margin-left: 80%;width:3%;font-size: 20px;" @click="edit_visible = false" >
        ×
      </el-button>
      <el-form ref="form" size="large" autocomplete="off"  :model="editFormData" :rules="rules">
                <el-form-item>
                    <span style="font-size: 22px;margin: auto;">修改密码</span>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入原密码" v-model="editFormData.oldPassword"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入新密码" v-model="editFormData.newPassword"></el-input>
                </el-form-item>
                <el-form-item prop="repassword">
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入新密码" v-model="editFormData.repassword"></el-input>
                </el-form-item>
                <!-- 确认按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space @click="edit" :plain="true">
                        确认修改
                    </el-button>
                </el-form-item>
            </el-form>
    </div>
  </el-drawer>
</div>
</div>

<layoutFooter></layoutFooter>
</div>

  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import tool from '../utils/oss.js'
  import layoutHeader from '@/components/layoutHeader.vue'
  import layoutFooter from '@/components/layoutFooter.vue'

  import { editService,authService,getInfoService } from '@/api/user.js'
  
  import { usePhoneStore } from '@/stores/phone'
import router from '@/router/index.js'
import { useTokenStore} from '@/stores/token.js'

  const phoneStore = usePhoneStore();
  const TokenStore = useTokenStore();

  //文件列表
  const fileList = ref([])
  
  const handleChange = (uploadFile, uploadFiles) => {
  fileList.value = uploadFiles;
  };
  
  const handleUpload = async () => {
  fileList.value.forEach(async file => {
  try {
  const res = await tool.oss.upload(file.raw);
  console.log(res);
  fileList.value = [];
  } catch (error) {
  console.error(error);
  }
  }
);
fileList.value = [];

  };

//身份认证抽屉
const auth_visible= ref(false);
//修改密码抽屉
const edit_visible = ref(false);
//gender单选
const radio = ref(3);


  //身份数据模型
  const authData = ref({
    UserID:'',
    IDCardNumber:'',
    FullName:'',
  })



  //用户信息模型
  const userInfo = ref({
    userId:'',
    idCardNumber:'',
    userName:'',
    phoneNumber:''
  })

  const editFormData = ref({
    oldPassword:'',
    newPassword:'',
    repassword:''
  })


//密码校验
const checkRePassword = (rules,value,callback)=>{
    if(value ===''){
        callback(new Error('再次确认密码'))
    }else if(value!==editFormData.value.newPassword){
        callback(new Error('确保两次输入密码一致'))
    }else{
        callback()
    }
    
}

  //表单校验规则
const rules = ref({
  password:[{
    required:true,message:'密码不能为空',trigger:'blur'
  },{
    min:3,max:18,message:'密码长度应在3-18个字符之间',trigger:'blur'
  }],
  repassword:[{validator:checkRePassword,trigger:'blur'}],
  
})


  const getUserInfo =async()=>{
    let phoneNumber = phoneStore.phone;
    let result = await getInfoService(phoneNumber);
    console.log("用户信息"+result.data);
    userInfo.value.userName=result.data.data.userName;
    userInfo.value.idCardNumber=result.data.data.idCardNumber;
    userInfo.value.phoneNumber= phoneNumber;
    userInfo.value.userId = result.data.data.userId
  }
  //页面加载即调用

onMounted(getUserInfo);

  //身份验证
  const auth = async()=>{
    authData.value.UserID = userInfo.value.userId;
    let result = await authService(authData.value);
    ElMessage.success("身份认证成功");
    auth_visible.value = false;
  }

  //修改密码
  const edit = async()=>{
    let dataObj = {
      userId:userInfo.value.userId,
      password:editFormData.value.newPassword
    }
    let result = await editService(dataObj);
    tempPassword.value = '';
    ElMessage.success("修改成功，请重新登录！");
    TokenStore.removeToken();
    router.push('./');
  }

  </script>

  <style scoped>
  
.mainbox{
  margin-top: 3%;
  width: 90%;
  height: 100%;
  margin-left:5%;
  display: flex;
  background-color: rgb(255, 255, 255);
  flex-direction: column;

}

.userinfo{
  width: 100%;
  color: black;
}
.block1{
  margin-top:2%;
  width:90%;
  height: auto;
  padding-bottom: 3%;
  padding-top:3%;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果：水平偏移值, 垂直偏移值, 模糊半径, 阴影颜色 */
  display: flex;
  padding-left: 5%;
  margin-left: 5%;;
}
.block1 span{
    margin-top:2%;
    margin-bottom: 2%;
    margin-left:10%;

  }
.mainbox span{
  margin-top:2%;
  margin-left:5%;
}
.peidt{
  flex:4;

}
.userinfoin{
  flex:6;
  flex-direction: column;
  display: flex;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2);
  
}

.auth{
  width: 100%;
  color: black;
  display: flex;
  flex-direction: column;
}
.auth .block1{
  display:flex;
  flex-direction: column;
}


.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.el-form {
max-width: 400px;
margin: 0 auto;
}

.el-form-item {
margin-bottom: 20px;
}

.uploadbox {
text-align: center;
}

.uploadbox .el-upload__tip {
margin-top: 10px;
}

.button {
display: block;
margin: 0 auto;
width: 200px;
}

.h1{
  font-size: 10px;
  font-weight: 400;
}


.el-button{
  margin-right: 13px;
}

  </style>